<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 9全选状态 -->
    <!-- 9.0 v-model 关联全选状态 -计算属性-->
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <!-- 3,新增任务 -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="downFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
    data(){
        return{
            task:''
        }
    },
 methods:{
     downFn(){
         //当前任务的名字要加到list数组里
         this.$emit("create",this.task)
         this.task=""
     }
 },
 computed:{
   isAll:{
     set(checked){
      //  9.3影响数组里的每个小选框的isDone
      this.arr.forEach(obj => obj.isDone=checked);
     },
     get(){
        // 9.4小选框统计状态 ->全选框
        // 9.5 如果没有数据，直接返回false
        return this.arr.length !==0 && this.arr.every(obj => obj.isDone === true)
     }
   }
 },
//  9.2父->子 list数组
  props:["arr"]
}
</script>